<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/class.css">
</head>
<body>
    <header>
        <p>分类</p>
        <i class="iconfont icon-sousuo"></i>
    </header>
    <!-- 主体 -->
    <main class="main">
        <!-- 左边列表 -->
        <ul class="menu">
            <li class="on">手机数码</li>
            <li>小米电视</li>
            <li>影视娱乐</li>
            <li>大家电</li>
            <li>智能家庭</li>
            <li>厨卫电器</li>
            <li>生活家电</li>
            <li>生活家电</li>
            <li>生活家电</li>
            <li>各户电器</li>
            <li>美食饮酒</li>
            <li>家具家装</li>
        </ul>
        
        <div class="right">
            <div class="banner">
                <img src="./img/second1.png" alt="">
            </div>
            
            <ul class="menus">
                <li><h2>精选分类</h2></li>
                <li>
                    <img src="./img/2.png" alt="">
                    <p>真无线</p>
                </li>
                <li>
                    <img src="./img/3.png" alt="">
                    <p>轻薄本</p>
                </li>
                <li>
                    <img src="./img/4.png" alt="">
                    <p>智能配件</p>
                </li>
                <li>
                    <img src="./img/5.png" alt="">
                    <p>数字系列</p>
                </li>
                <li>
                    <img src="./img/6.png" alt="">
                    <p>吸顶灯</p>
                </li>
                <li>
                    <img src="./img/7.png" alt="">
                    <p>触屏音响</p>
                </li>
            </ul>
            <ul class="menus">
                <li><h2>精选分类</h2></li>
                <li>
                    <img src="./img/8.png" alt="">
                    <p>经典酒饮</p>
                </li>
                <li>
                    <img src="./img/9.png" alt="">
                    <p>家具好物</p>
                </li>
                <li>
                    <img src="./img/10.png" alt="">
                    <p>平板电视</p>
                </li>
                <li>
                    <img src="./img/11.png" alt="">
                    <p>户外运动</p>
                </li>
                <li>
                    <img src="./img/12.png" alt="">
                    <p>清凉电器</p>
                </li>
                <li>
                    <img src="./img/13.png" alt="">
                    <p>生活优选</p>
                </li>
            </ul>
        </div>
    </main>
    <footer>
        <div class="span">
            <i class="iconfont icon-shouye-xianxing"></i> 
            <span>首页</span>
        </div>
        <div class="span1">
            <i class="iconfont icon-fenlei"></i>
            <span >分类</span>
        </div>
        <div class="span2">
            <i class="iconfont icon-gouwuche"></i>
            <span >购物车</span>
        </div>
        <div class="span3">
            <i class="iconfont icon-wode"></i>
            <span >我的</span>
        </div>
    </footer>
    <script>
        let span = document.querySelector(".span")
        let span2 = document.querySelector(".span2")
        let span3 = document.querySelector(".span3")

        span.onclick = function(){
            location.href = "index.html"
        }
        span2.onclick = function(){
            location.href = "button.html"
        }
        span3.onclick = function(){
            location.href = "personal.html"
        }
    </script>
</body>
</html>